import React, { Component } from "react";
import { Route, Switch, Redirect, withRouter } from "react-router-dom";
import { Spin } from "antd";
import { appReducer } from "@/store";
import { CrashPage } from "@/component";
import { scrollTops } from "@/utils";
import "./antd-theme.less";
import "./antd-theme-online.less";
import "./App.less";

import routes from "./router";
const aaaaaa = process.env.REACT_APP_DEFAULT_PROXY_PREFIX;
console.log("aaaaaa===", aaaaaa);
class App extends Component {
  constructor(props) {
    super(props);
    this.state = { loading: false, hasError: false, tagsNum: 0, back_top: false };
  }
  // static getDerivedStateFromError(error) {
  //   // 更新 state 使下一次渲染可以显示降级 UI
  //   console.log("更新 state 使下一次渲染可以显示降级 UI==", error);
  //   return { hasError: true };
  // }
  componentDidMount() {
    window.addEventListener("scroll", this.backTop);
    this.backTop();
    window.onerror = null;
    // window.addEventListener("error", this.crashError);
    // 屏蔽鼠标右键.
    // window.document.oncontextmenu = function () {
    //   return false
    // }
    appReducer.subscribe(() => {
      let storeState = appReducer.getState();
      this.setState({
        loading: storeState.loading
      });
    });
    // this.rightPage()
  }
  componentWillUnmount() {
    window.removeEventListener("scroll", this.backTop);
  }
  /**
   * @name rightPage
   * @description 再次刷新，/water-fall页面方法更改为正常，将次级页面渲染为正常页面
   */
  rightPage = () => {
    const sessData = window.sessionStorage.getItem("waterfall");
    if (sessData) {
      let nums = Number(JSON.parse(sessData));
      window.sessionStorage.setItem("waterfall", JSON.stringify(`${nums + 1}`));
      this.setState({ hasError: false });
    }
  };
  componentDidUpdate() {
    const pathData = window.sessionStorage.getItem("path");
    const newpath = window.location.pathname;
    if (pathData !== newpath) {
      window.sessionStorage.setItem("path", newpath);
      this.setState({ path: newpath, hasError: false });
    }
  }
  componentDidCatch(error, info) {
    console.log("catch===", error, info);
    this.setState({ hasError: true });
    return null;
  }
  /**
   * @name routerBefore
   * @description 路由铺开
   */
  routerBefore = () => {
    let arr = [];
    arr = routes.reduce((pre, cur) => {
      if (cur.children) {
        pre = pre.concat(cur.children);
        return pre;
      } else {
        pre.push(cur);
        return pre;
      }
    }, []);
    return arr;
  };
  /**
   * @name backTop
   * @description 超出距离-显示返回顶部
   */
  backTop = () => {
    let tops = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    if (tops > 50 && !this.state.back_top) {
      this.setState({ back_top: true });
    } else if (tops <= 50 && this.state.back_top) {
      this.setState({ back_top: false });
    }
  };
  render() {
    const { loading, hasError, back_top } = this.state;
    if (hasError) {
      return <CrashPage />;
    }

    return (
      <div id="app">
        {back_top && (
          <div className="back_top" onClick={scrollTops} title="返回顶部">
            Top
          </div>
        )}
        <Spin spinning={loading}>
          {/**
          <Switch>
            {routes.map((item) =>
              item.children && item.children.length > 0 ? (
                item.children.map((v) => <Route key={v.path} exact={v.exact} path={v.path} component={v.component} />)
              ) : (
                <Route key={item.path} exact={item.exact} path={item.path} component={item.component} />
              )
            )}
            <Redirect key="redirect" to="/" />
          </Switch> */}
          <Switch>
            {this.routerBefore().map((v) => (
              <Route key={v.path} exact={v.exact} path={v.path} component={v.component} />
            ))}
            <Redirect key="redirect" to="/" />
          </Switch>
        </Spin>
      </div>
    );
  }
}

export default withRouter(App);
